// 约束当屏幕大于750px时，html就不变化了
@media screen and (min-width:750px) {
    html {
        font-size: 37.5px !important;
    }
}


body {
    box-sizing: border-box;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    background-color: #f2f4f7;

    :nth-child(2),
    :nth-child(3) {
        margin-top: .5333rem;
    }

    :nth-child(3) {
        margin-bottom: 3.0333rem;
    }

    section {
        overflow: hidden;
        background-color: #fff;
        padding: .2667rem 0;

        // margin: .2667rem 0;


        .header {
            height: 3.44rem;
            line-height: 3.44rem;
            text-align: center;
            border-bottom: .0267rem solid #EAEAEA;
            font-size: .9333rem;
            color: #1C1C1C;
        }

        .nav {
            display: flex;
            flex-wrap: wrap;

            .items {
                margin: 0;
                padding: 0;
                display: flex;
                width: 33.3333%;
                // 主轴换为竖轴
                flex-direction: column;
                // 水平居中
                align-items: center;
                padding: 1.2rem 0 .9333rem 0;

                img {
                    width: 3.7067rem;
                    height: 3.7067rem;
                }

                span {
                    font-size: .6667rem;
                    color: #707070;
                }
            }
        }

        .news {
            margin: .8rem .2667rem .8rem .48rem;

            img {
                width: 19.28rem;
                height: 4.1067rem;
            }
        }

    }


    .teach {
        margin-bottom: 1rem;
        position: relative;
        height: 15.36rem;
        background-color: #fff;
        margin: .2667rem 0;
        padding: .6667rem .6133rem;

        h4 {
            margin: 0;
            position: absolute;
            top: .6667rem;
            left: .6133rem;
            font-size: .7467rem;

            img {
                margin-right: .48rem;
                vertical-align: middle;
                display: inline-block;
                height: .9867rem;
                width: .9867rem;
            }
        }

        a {
            position: absolute;
            top: .6667rem;
            right: .6133rem;
            font-size: .5867rem;
            color: #999;
        }


        .teach-bd {
            .swiper-container {
                overflow: hidden;
                width: 14.4rem;
                height: 14.0267rem;

                margin: .7333rem 0 0 2.5333rem;

            }

            .swiper-slide {
                margin-left: .8rem;
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;

                flex-direction: column;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                transition: 300ms;
                transform: scale(0.8);
                // 其余透明度为0.5
                opacity: 0.5;
                --swiper-theme-color: #ff6600;
                /* 设置Swiper风格 */
                --swiper-navigation-color: #00ff33;
                /* 单独设置按钮颜色 */
                --swiper-navigation-size: 30px;

                /* 设置按钮大小 */
                a {
                    flex: 1;
                    width: 9.0133rem;
                    height: 10.0267rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    p {
                        width: 9.0133rem;
                        font-size: .64rem;
                        color: #333;
                    }
                }
            }

            // 当前选中的
            .swiper-slide-active,
            .swiper-slide-duplicate-active {
                transform: scale(1);
                z-index: 1;
                // 当前选中的透明度为1（不透明）
                opacity: 1;
            }
        }

    }

    .study {

        .study-border {
            padding: .5333rem 0;

            .swiper-slide {
                overflow: hidden;
                padding: .1333rem;
                position: relative;
                text-align: center;
                font-size: 18px;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 7.7333rem;
                height: 9.0667rem;
                border-radius: .1333rem;
                background-color: white;
                margin: 2.7467rem .6933rem 0;
                box-shadow: 0 0 .2667rem rgba(0, 0, 0, 0.2);


                img {
                    position: absolute;
                    top: .1333rem;
                    left: .1333rem;
                    display: block;
                    width: 6.9533rem;
                    height: 4.5333rem;
                    object-fit: cover;
                }

                h5 {
                    position: absolute;
                    top: 4.9333rem;
                    left: .2133rem;
                    width: 7.2533rem;
                    font-size: .6667rem;
                    font-weight: 400;
                    text-align: left;
                }

                p {
                    position: absolute;
                    top: 7.2rem;
                    left: .2133rem;
                    font-size: .6133rem;

                    span {
                        color: #ff4400;
                    }
                }
            }
        }


    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        height: 3.0133rem;
        background-color: #fff;
        border-top: .0267rem solid #e2e2e2;
        z-index: 1111;

        :nth-child(2),
        :nth-child(3) {
            margin-top: 0;
        }

        a {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;

            img {
                margin: .5333rem 0 .2667rem;
                width: 1.1467rem;
                height: 1.1467rem;
            }

            p {
                font-size: .5867rem;
                color: #666;
            }
        }
    }
}